<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="page" />
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      transitionName: "slide-right"
    };
  },
  props: {},
  computed: {},
  watch: {
    $route() {
      // console.log(n, "<<<--------------- nnnn ");
      // console.log(o, "<<<--------------- oooo ");
      let direction = this.$router.direction;
      let isBack = this.$router.isBack;
      if (isBack === true) {
        this.transitionName = `slide-${direction}`;
      } else if (isBack === false) {
        this.transitionName = `slide-${direction}`;
      }
      console.log(this.transitionName, "<<<--------------- 动画的名字 ");
    }
  },
  methods: {},
  created() {},
  mounted() {},
  destroyed() {}
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
}
#app {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app .page {
  width: 100%;
  height: 100%;
}
.slide-right-enter,
.slide-right-enter-active,
.slide-right-leave,
.slide-right-leave-active,
.slide-left-enter,
.slide-left-enter-active,
.slide-left-leave,
.slide-left-leave-active {
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  /* 开启CPU、GPU和硬件加速 */
  will-change: transform;
  /* transform-style: preserve-3d; 保留3D空间 */
  box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.6);
}
.slide-left-enter {
  transform: translateX(-100%);
}
.slide-left-enter-active {
  transition: transform 2s;
}
.slide-left-enter-to {
  transform: translateX(0%);
}
.slide-left-leave {
  transform: translateX(0%);
}
.slide-left-leave-active {
  transition: transform 2s;
}
.slide-left-leave-to {
  transform: translateX(100%);
}

.slide-right-enter {
  transform: translateX(100%);
}
.slide-right-enter-active {
  transition: transform 2s;
}
.slide-right-enter-to {
  transform: translateX(0%);
}

.slide-right-leave {
  transform: translateX(0%);
}
.slide-right-leave-active {
  transition: transform 2s;
}
.slide-right-leave-to {
  transform: translateX(-100%);
}
</style>
